<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24"
			        style="padding: 0px;">
				<el-col :span="6"
				        style="padding-right: 5px!important;padding-left: 15px!important">
					<el-input size="small"
					          v-model="resTreeSearchValue"
					          placeholder="请输入内容"
					          icon="search"
					          @click="searchTree"></el-input>
				</el-col>
				<el-col :span="18"
				        style="text-align: right">
					<el-button type="primary"
					           size="small"
					           v-on:click='add'>新增</el-button>
					<el-button type="primary"
					           size="small"
					           @click.native.prevent="edit()">编辑</el-button>
					<el-button type="primary"
					           size="small"
					           @click.native.prevent="start()">启用</el-button>
					<el-button type="primary"
					           size="small"
					           @click.native.prevent="stop()">停用</el-button>
	
				</el-col>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="6"
			        style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="resTreeData"
				         :filter-node-method="filterNode"
				         :highlight-current=true
				         :props="defaultProps"
				         accordion
				         @node-click="handleNodeClick"
				         :auto-expand-parent=false
				         ref="resTree"
				         node-key="id"></el-tree>
			</el-col>
			<el-col :span="18"
			        style="padding-right: 0px!important;padding-left: 0px!important;">
				<el-table border
				          stripe
				          :data="resTabelData"
				          style="height:100%;"
				          @selection-change="handleSelectionChange">
					<el-table-column type="selection"
					                 width="60">
					</el-table-column>
					<el-table-column prop="resName"
					                 label="名称"
					                 width="200">
					</el-table-column>
					<el-table-column prop="resType"
					                 label="类型"
					                 :formatter="resTypeCov">
					</el-table-column>
					<el-table-column prop="resPath"
					                 label="前端路由"
					                 width="200">
					</el-table-column>
					<el-table-column prop="resUrl"
					                 label="关联接口"
					                 width="150">
					</el-table-column>
					<el-table-column prop="resStatus"
					                 label="状态"
					                 :formatter="statusCov"
					                 width="120"> </el-table-column>
					<!--<el-table-column label="操作" width="160" fixed="right">
		                        <template scope="scope">
		                            <el-tooltip class="item" effect="light" content="编辑" placement="top">
		                                <el-button type="primary" size="mini" class="iconfont icon-dingdan" @click.native.prevent="edit(scope.$index)"></el-button>
		                            </el-tooltip>
		                            <el-tooltip class="item" effect="light" content="启用" placement="top">
		                                <el-button type="info" size="mini" class="iconfont icon-kaishi" @click.native.prevent="start(scope.$index)"></el-button>
		                            </el-tooltip>
		                            <el-tooltip class="item" effect="light" content="停用" placement="top">
		                                <el-button type="warning" size="mini" class="iconfont icon-stop" @click.native.prevent="stop(scope.$index)"></el-button>
		                            </el-tooltip>
		                        </template>
		                    </el-table-column>-->
				</el-table>
			</el-col>
		</el-row>
		<!--资源表单 -->
		<el-dialog title="资源信息"
		           v-model="resFormShow">
			<el-form :model="resFormData"
			         ref="resForm"
			         :rules="resRule"
			         label-width="100px">
				<el-form-item label="资源类型"
				              required
				              prop="resType">
					<el-select size="small"
					           v-model="resFormData.resType"
					           placeholder="请选择"
					           readonly>
						<el-option v-for="item in resTypeComboData"
						           :label="item.label"
						           :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="资源名称"
				              prop="resName"
				              required>
					<el-input size="small"
					          v-model="resFormData.resName"></el-input>
				</el-form-item>
				<el-form-item label="页面路径"
				              prop="resPath">
					<el-input size="small"
					          placeholder=""
					          v-model="resFormData.resPath">
					</el-input>
				</el-form-item>
				<el-form-item label="关联接口"
				              prop="resUrl">
					<el-input size="small"
					          placeholder=""
					          v-model="resFormData.resUrl">
					</el-input>
				</el-form-item>
				<el-form-item label="资源说明"
				              prop="resDesc">
					<el-input size="small"
					          type="textarea"
					          :rows="2"
					          placeholder="请输入内容"
					          v-model="resFormData.resDesc">
					</el-input>
				</el-form-item>
				<el-form-item label="显示顺序"
				              prop="resOrder">
					<el-input-number size="small"
					                 v-model="resFormData.resOrder"
					                 :min="0"
					                 :max="999"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="resFormShow = false">取 消</el-button>
				<el-button type="primary"
				           @click="saveRes">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data: function () {
		return {
			//树型数据配置
			defaultProps: {
				children: 'child',
				label: 'resName'
			},
			//资源树查询
			resTreeSearchValue: "",
			//树型查询条件
			treeQueryValue: '',
			//树型数据
			resTreeData: [],
			//子菜单表格数据
			resTabelData: [],
			//子系统下级
			sysChild: [],
			//模块下级
			moduleChild: [],
			//功能下级
			funcChild: [],
			//资源类型下拉数据
			resTypeComboData: [],
			//资源表单是否显示
			resFormShow: false,
			//定义空数组，来判断 单选 选中哪一个
			multipleSelection: [],
			//资源 Form 数据
			resFormData: {
				id: '',
				resName: '',
				resType: '',
				resStatus: '1',
				resOrder: 0,
				resPId: '',
				resPath: '',
				resUrl: '',
				resCode: '',
				resIco: '',
				resDesc: '',
				updateTime: 0,
				updateUser: '',
				createTime: 0,
				createUser: ''

			},
			//资源 Form 空数据
			resEmptyData: {
				id: '',
				resName: '',
				resType: '',
				resStatus: '1',
				resOrder: 0,
				resPId: '',
				resPath: '',
				resUrl: '',
				resCode: '',
				resIco: '',
				resDesc: '',
				updateTime: 0,
				updateUser: '',
				createTime: 0,
				createUser: ''

			},
			//资源类型转换
			resTypeData: {},
			//当前树型节点 ID
			curTreeResId: '',
			curTreeResType: '',
			//表单较验规则
			resRule: {
				resName: [{
					required: true,
					message: '请输入资源名称',
					trigger: 'blur'
				}],
				resType: [{
					required: true,
					message: '请选择资源类型',
					trigger: 'change'
				}],
			}
		}
	},
	methods: {
		//查询树节点
		searchTree: function () {
			if (this.$data.resTreeSearchValue == "") {
				this.$message("请输入查询条件");
				this.queryTree();
				return;
			}
			this.$refs.resTree.filter(this.$data.resTreeSearchValue);
		},
		//点击资源树节点
		handleNodeClick(data) {
			this.$data.curTreeResId = data.id;
			this.$data.curTreeResType = data.resType;
			debugger;
			if (data.resType == "4") {
				return;
			}
			this.queryResGrid(data.id);
		},

		//复选框回调函数
		handleSelectionChange: function (val) {
			debugger;
			this.$data.multipleSelection = val;
		},
		reminderDelte: function () {
			debugger;
			if (this.$data.multipleSelection.length == 1) {
				this.openRemind(this.$data.multipleSelection[0].id)
			} else {
				this.$message.error("请选择一条数据")
			}

		},

		//查询资源列表
		queryResGrid: function (resId) {
			this.$http.get(this.API_ROOT + '/rbac/res/resTreeChild', {
				params: {
					id: resId
				}
			}).then((response) => {
				this.$data.resTabelData = response.data.dataList; //Object.assign(this.$data.resTabelData, response.data.dataList);
			}, (response) => { });
		},

		//启用资源
		start: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/rbac/res/start',
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.queryResGrid(data.resPId);
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//停用资源
		stop: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/rbac/res/stop',
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.queryResGrid(data.resPId);
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//改变资源类型
		changResComboType: function () {
			//当前资源类型
			var type = this.$data.curTreeResType;
			switch (type) {
				case "1":
					this.$data.resTypeComboData = this.$data.sysChild;
					break
				case "2":
					this.$data.resTypeComboData = this.$data.moduleChild;
					break
				case "3":
					this.$data.resTypeComboData = this.$data.funcChild;
					break
				case "4":
					this.$data.resTypeComboData = this.$data.sysChild;
					break
				default:

			}
		},
		//新增
		add: function () {
			this.changResComboType();
			this.$data.resFormData = Object.assign(this.$data.resFormData, this.$data.resEmptyData)
			this.$data.resFormData.resPId = this.$data.curTreeResId == "" ? "0" : this.$data.curTreeResId;
			this.$data.resFormShow = true;
		},
		//编辑
		edit: function () {
			if (this.$data.multipleSelection.length == 1) {
				this.changResComboType();
				var data = this.$data.multipleSelection[0].id;
				this.$http.get(this.API_ROOT + '/rbac/res/info', {
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$data.resFormData = Object.assign(this.$data.resFormData, resp.data.data);
					this.$data.resFormShow = true;
				}, function (error) { })
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//保存角色
		saveRes: function (index) {
			this.$refs.resForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/rbac/res/save', this.$data.resFormData)
						.then(resp => {
							if (resp.data.success) {

								this.$message(resp.data.msg);
								this.queryTree();
								this.queryResGrid(this.$data.curTreeResId);
								this.$data.resFormShow = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
		},
		//状态转换
		statusCov: function (row, column) {
			return row.resStatus == 1 || row.resStatus == "1" ? "已启用" : "已停用";
		},
		//资源类型转换
		resTypeCov: function (row, column) {
			return this.$data.resTypeData[row.resType];
		},
		queryTree: function () {
			this.$http.get(this.API_ROOT + '/rbac/res/resTree', {}).then((response) => {
				this.$data.resTreeData = response.data.dataList;
			}, (response) => { });
		},
		//资源过滤
		filterNode: function (value, data, node) {
			if (!value) return true;
			return data.resName.indexOf(value) !== -1;
		}
	},
	//组件创建时
	created: function () {
		//获取资源树
		this.$http.get(this.API_ROOT + '/rbac/res/resTree', {

		}).then((response) => {
			this.$data.resTreeData = response.data.dataList;
			this.queryResGrid('');
		}, (response) => { });
		//获取资源类型转换值
		this.$http.get(this.API_ROOT + '/base/dict/convert', {
			params: {
				group: "resType"

			}
		}).then((response) => {
			this.$data.resTypeData = response.data;
		}, (response) => { });
		//获取资源下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "resType_sys"
			}
		}).then((response) => {
			this.$data.sysChild = response.data;
		}, (response) => { });
		//获取模块下级资源下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "resType_module"
			}
		}).then((response) => {
			this.$data.moduleChild = response.data;
		}, (response) => { });
		//获取功能资源下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "resType_func"
			}
		}).then((response) => {
			this.$data.funcChild = response.data;
		}, (response) => { });

		//获取资源下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "resType_root"
			}
		}).then((response) => {
			this.$data.resTypeComboData = response.data;
		}, (response) => { });
	}

};
</script>
<style>

</style>